<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人财务记账系统</title>
    <link rel="stylesheet" type="text/css" href="css/finamcial.css">
    <script src="js/jquery.min.js"></script>
    <style>
        .back{
            text-align: left;
        }
        .back a{
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="back">
                <a href="index.html"> < 返回</a>
            </div>
            <h1>个人财务记账系统</h1>
            <div class="balance">
                当前余额: ¥<span id="total_money">0.00</span>
            </div>
        </header>
        <div class="card">
            <h2>添加新记录</h2>
            <form method="POST" id="account">
                <div class="form-group">
                    <label for="type">类型</label>
                    <select id="type" name="type" required>
                        <option value="income">收入</option>
                        <option value="expense">支出</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="amount">金额 (¥)</label>
                    <input type="number" id="amount" name="amount" step="0.01" min="0.01" required>
                </div>
                
                <div class="form-group">
                    <label for="category">分类</label>
                    <select id="category" name="category" required>
                        <option value="工资">工资</option>
                        <option value="奖金">奖金</option>
                        <option value="兼职">兼职</option>
                        <option value="餐饮">餐饮</option>
                        <option value="购物">购物</option>
                        <option value="交通">交通</option>
                        <option value="娱乐">娱乐</option>
                        <option value="住房">住房</option>
                        <option value="医疗">医疗</option>
                        <option value="其他">其他</option>
                    </select>
                </div>
                
                <div class="form-group full-width">
                    <label for="description">描述</label>
                    <input type="text" id="description" name="description">
                </div>
                
                <div class="form-group full-width">
                    <button type="button" id="add" name="add">添加记录</button>
                </div>
            </form>
        </div>

        <div class="card">
            <h2>财务记录</h2>
            <div class="filters">
                <a href="javascript:;"  class="filter-btn list" data-type="all">全部</a>
                <a href="javascript:;"  class="filter-btn list" data-type="income">收入</a>
                <a href="javascript:;"  class="filter-btn list" data-type="expense">支出</a>
            </div>
            <div class="transaction-list" id="transaction-list">
                  <div class="transaction-item">
                      无记录
                  </div>
            </div>
        </div>
    </div>

    <script>
        $(function(){
            //检测用户登录状态
            $.post("controller/checklogin.php","",function(e){
                e = JSON.parse(e)
                if(!e.code){
                    //直接跳转至登录页
                    location.href = "login.html";
                }
            })
            //------------------------------------------------------
            //获取总金额
            function getTotalMoney() {
                $.post("controller/get_total_money.php", "", function (e) {
                    $("#total_money").html(e)
                    // 动态更新余额颜色
                    var total_money = parseFloat($("#total_money").html())
                    if (total_money >= 0) {
                        $(".balance").removeClass("negative");
                        $(".balance").addClass("positive");
                    } else {
                        $(".balance").removeClass("positive");
                        $(".balance").addClass("negative");
                    }
                })
            }
            //初始化总金额
            getTotalMoney();
            //------------------------------------------------------
            //替换列表内容
            function account_list(type){
                $.post("controller/query_finamcial.php",{type:type},function(e){
                    //将返回的数据转为对象
                    e = JSON.parse(e)
                    //组织列表
                    let listhtml = "";
                    //如果能够查到账单列表，则遍历数据，如果没有则不做任何操作
                    if(e.data) {
                        //清空列表
                        $("#transaction-list").html("")
                        //组织列表的HTML
                        e.data.forEach(function (item) {
                            listhtml += "<div class='transaction-item'><div class='transaction-info'> <div class='transaction-title'>" + item.description + "</div><div class='transaction-meta'> <span>" + item.type_name + "</span> <span>" + item.create_times + "</span></div></div> ";
                            if (item.type == "income") {
                                listhtml += "<div class='income'>+¥" + item.amount + "</div>";
                            } else {
                                listhtml += "<div class='expense'>-¥" + item.amount + "</div>";
                            }
                            listhtml += "<div class='transaction-actions'><button type='button' data-type='" + type + "' data-id='" + item.id + "' class='delete-btn'>删除</button> </div></div>";

                        });
                        //添加列表
                        $("#transaction-list").html(listhtml)
                    }
                })
            }
            //初始化财务记录
            account_list("all");
            $(".list:eq(0)").addClass("active");
            //点击按钮查询列表
            var type = "all";
            //为财务记录按钮绑定事件
            $(".list").on("click",function(){
                //点击对应的按钮添加选中样式
                $(".list").removeClass("active");
                $(this).addClass("active");
                //查询对应的记录列表并渲染
                type = $(this).data("type");
                account_list(type); //替换列表内容
            })
            //------------------------------------------------------
            //添加账单
            $("#add").on("click",function(){
                //添加记录
                var data = {}
                $("#account").serializeArray().forEach(function(item){
                    data[item.name] = item.value;
                })
                //验证金额是否为空
                if(!data.amount){
                    alert("请输入金额");
                    $("#amount").focus();
                    return;
                }
                //填写描述
                if(!data.description){
                    alert("请输入描述");
                    $("#description").focus();
                    return;
                }
                var type_ch = "";
                if(data.type == "income"){
                    type_ch = "收入"
                }else if(data.type == "expense"){
                    type_ch = "支出"
                }
                var confirm_str = "确定添加"+data.category + type_ch + "￥" + data.amount;
                if(data.description){
                    confirm_str += ",该项记录描述：" + data.description
                }
                //执行添加
                if(confirm(confirm_str+"?")) {
                    $.post("controller/add_finamcial.php", {data: data}, function (e) {
                        e = JSON.parse(e);
                        getTotalMoney() //更新当前金额
                        alert(e.msg)
                        //清空金额和描述
                        $("#description").val("")
                        $("#amount").val("")
                        //更新列表哦
                        account_list(type)
                    })
                }
            })

            //删除账单
            $(".transaction-list").on("click",".delete-btn",function(){
                var types = $(this).data("type");
                if(confirm("您确定要删除吗？")){
                    $.post("controller/del_finamcial.php",{id:$(this).data("id")},function(e){
                        e = JSON.parse(e);
                        alert(e.msg);
                        if(e.code) {
                            account_list(types); //重写查询列表
                            getTotalMoney(); //重写计算总额
                        }
                    })
                }
            })
        })

    </script>
</body>
</html>